<template>
  <basic-dialog
    :visible="show"
    title="保养项目详情"
    isShowClose
    :min-width="'1000px'"
    @close="$emit('close', false)"
  >
    <div
      class="padding-20"
      style="padding-bottom: 0"
    >
      <detail-dialog
        :headList="headList"
        :detailData="detailData"
        class="font-size-14"
      ></detail-dialog>
    </div>
    <q-separator />
    <div class="padding-l-20 q-mb-sm q-mt-sm">
      <div class="plan-title">保养项目</div>
    </div>
    <div class="page-content padding-b-20">
      <q-table
        :data="tableData"
        :columns="columns"
        row-key="id"
        class="myTable scroll inherit"
        style="margin: 0 20px;max-height: 380px"
        :pagination.sync="pagination"
        :hide-bottom="tableData.length !== 0"
        :loading="isTableLoading"
        color="primary"
      />
    </div>
  </basic-dialog>
</template>

<script>
import { getMaintenaceProgramsById } from 'src/boot/maintenance/maintenance-item'
export default {
  name: 'detail-maintenance-item-dialog',
  props: {
    show: Boolean
  },
  data () {
    return {
      data: {},
      columns: [
        { name: 'index', label: '序号', field: 'index', align: 'left' },
        { name: 'contentName', label: '项目内容', field: 'contentName', align: 'left' },
        { name: 'criteria', label: '判断基准', field: 'criteria', align: 'left' }
      ],
      tableData: [],
      // 表格分页配置
      pagination: {
        // 总条数
        rowsNumber: 0
      },
      headList: {
        name: '项目名称',
        deviceTypeName: '设备类型',
        maintenanceTypeName: '保养类型'
      },
      detailData: {},
      isTableLoading: false
    }
  },
  watch: {
    show (newPro) {
      this.detailData = {}
      this.tableData = []
      newPro && this.getList()
    }
  },
  methods: {
    getList () {
      this.isTableLoading = true
      getMaintenaceProgramsById(this.$attrs.maintenanceItemData.id).then((result) => {
        const ret = result.data
        this.detailData = ret
        this.tableData = ret.items.map((v, i) => {
          const item = v
          item.index = i + 1
          item.criteria = this.$utils.label(item.criteria)
          return item
        })
        this.isTableLoading = false
      }).catch((err) => {
        this.isTableLoading = false
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="stylus"></style>
